Анимированное меню

rolling · June 3, 2010

Добрый день!

Ситуация следующая: имеется меню из текста и картинки, при наведении на строку меню картинка с помощью java-script изменяется на другую (картинка2).

Проблема в том, что при наведении на меню первый раз картинка2 грузится некоторое время (в зависимости от скорости инета), чего хотелось бы избежать.

Идея загрузить вторую картинку заранее, чтобы она прокешировалась сразу при загрузке страницы реализовывалась след. образом:

<img src="pictures/logo1.jpg">
<img src="pictures/logo2.jpg" style="display: none;">

Но она не принесла успеха.

Подскажите п-ста, каким образом можно избежать длительной загрузки второй картинки при наведении на меню?

d0ublezer0 · June 3, 2010

Весь код в студию.

Мысль - если вы меняете картинку в подчиненном элементе при наведении - то для чего вам javascript? Можно ведь использовать псевдокласс hover.

По вашей проблеме (медленная загрузка)

Вариант раз: оптимизировать графику, чтобы меньше весила.

Вариант два: использовать JS префетч какой-нибудь, например похожие функции были в DreamWeaver

klierik · June 3, 2010

используй спрайт

d0ublezer0 · June 3, 2010

Да, вариант три: Использовать картинку, совмещающую в себе оба изображения, вложить её в div с overflow:hidden или как background со смещением и по наведению через hover менять положение внутри слоя.

Таким образом, у вас всегда будет полностью загруженное изображение, и будет меняться без тормозов и без использования JS, который у некоторых может быть и отключен..

Да, вот и скрипт предварительной загрузки:

<body onload="MM_preloadImages('картинка-раз.jpg','картинка-два.jpg')">

<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
	var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
	if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
//-->
</script>

Ясно, что код не мой.

используй спрайт

Ну да. Вот тут можно почитать про спрайты и их использование

P.S. Блин, три сообщения в одно склеились

Edited June 3, 2010 by d0ublezer0

Sign In

Анимированное меню

Question

rolling

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

d0ublezer0

Link to comment

Share on other sites

klierik

Link to comment

Share on other sites

d0ublezer0

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information